<template>
  <article>
    <!-- 加多一层section，解决边框溢出与底座冲突 -->
    <section
      class="chart_container"
      :style="{ width: containerWidth, height: containerWidth }"
    >
      <!-- 图表 -->
      <div
        :id="id"
        class="chart"
        :style="{ width: outerWidth, height: outerWidth }"
      />
    </section>

    <!-- 底座 -->
    <div class="remark" :style="{ width: outerWidth }">
      <div class="pedestal">
        <div
          class="top"
          :style="{
            width: outerWidth,
            background: pedestalColor,
          }"
        >
          <p
            :style="{
              width: outerWidth,
              background: pedestalColor,
              'box-shadow': pedestalBoxShadow,
            }"
          />
        </div>
        <div
          class="front"
          :style="{
            width: outerWidth,
            background: pedestalColor,
          }"
        />
      </div>
      {{ data.remark || "标准" }}
    </div>
  </article>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    id: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    other: {
      type: Object,
      default: null,
    },
    vstyle: {
      type: Object,
      default: null,
    },
  },
  computed: {
    containerWidth() {
      if (this.vstyle && this.vstyle.outerRadius) {
        return this.vstyle.outerRadius * 2 - 4 + "px";
      }
      return "100px";
    },
    outerWidth() {
      if (this.vstyle && this.vstyle.outerRadius) {
        return this.vstyle.outerRadius * 2 + "px";
      }
      return "100px";
    },

    pedestalColor() {
      if (this.vstyle && this.vstyle.spaceColor) {
        return `linear-gradient(
            to top,
            ${this.vstyle.spaceColor} 30%,
            ${this.vstyle.cilcleColor} 100%)`;
      }
      return "linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(11, 216, 232, 0.4) 100%)";
    },
    pedestalBoxShadow() {
      const shadow = `inset 0 10px 4px -6px ${this.vstyle.borderColor}`;
      return shadow;
    },
  },
  mounted() {
    const myChart = this.initEchart();
    const option = this.deployOption();
    option && myChart.setOption(option);
  },
  methods: {
    // 配置圆环的分段数
    subSum() {
      const data = [];
      for (let i = 1; i <= this.data.subSum; i++) {
        if (i % 2 === 0) {
          data.push({ value: 100, name: "2" });
        } else {
          data.push({ value: 100, name: "1" });
        }
      }
      return data.length > 0
        ? data
        : [
            { value: 100, name: "1" },
            { value: 100, name: "2" },
          ];
    },
    // 请求圆心图片
    // 设想如果用户不传图片、传错图片的情况，如何处理
    requireImgUrl(url) {
      if (!url) return "";
      let img;
      try {
        // 这一步要对用户传值的处理，避免出现相对路径问题
        img = require("@/" + url.replace(/@\//, ""));
      } catch (err) {
        // 如果图片读取错误，使用错误图片
        // 支持传值，如果不传应使用线上图片代替
        img = require("@/assets/error.png");
      }
      return img;
    },
    // 配置圆心图片、文案
    deployGraphic() {
      if (!this.vstyle) return "";
      return [
        {
          type: "group",
          left: "center",
          top: "center",
          children: [
            {
              type: "circle",
              // 不设置宽高定位失效
              left: "center",
              top: "center",
              shape: {
                cx: 0,
                cy: 0,
                r: this.vstyle.innerRadius - 2 || 43,
              },
              style: {
                fill: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: this.vstyle.spaceColor, // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "rgba(0, 0, 0, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: this.vstyle.cilcleColor, // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            {
              type: "text",
              left: "center",
              top: "-16",
              style: {
                text: this.data.value,
                fill: "#fff",
                font: "22px sans-serif",
              },
            },
            {
              type: "text",
              left: "center",
              top: "10",
              style: {
                text: this.data.unit,
                fill: "#ccc",
                font: "12px sans-serif",
              },
            },
          ],
        },
      ];
    },
    // 初始化图表对象
    initEchart() {
      var chartDom = document.getElementById(this.id);
      var myChart = echarts.init(chartDom);
      return myChart;
    },
    // 配置option
    deployOption() {
      const option = {
        tooltip: {
          // 鼠标悬停tip框
          trigger: "",
        },
        // 图表上方文本
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },

        // 圆心配置
        graphic: this.deployGraphic(),
        color: [this.vstyle.borderColor, "#d0d1d2"],
        series: [
          {
            name: "Access From",
            type: "pie",
            // 环形厚度，不允许百分比传值，方便使用
            radius: [
              this.vstyle.innerRadius || 45,
              this.vstyle.outerRadius || 50,
            ],
            avoidLabelOverlap: false,
            // 取消鼠标悬停放大
            hoverAnimation: false,
            label: {
              show: false,
              position: "center",
            },
            // 单个圆弧边框样式
            itemStyle: {
              borderColor: this.vstyle.spaceColor,
              borderWidth: 2,
              // borderCap: 'square'
            },
            // 鼠标悬停圆心内容
            emphasis: {
              label: {
                show: false,
              },
            },
            data: this.subSum(),
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.chart_container {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.chart {
  width: 104px;
  height: 104px;
}
.remark {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  color: #999;
  font-size: 14px;
  perspective: 400px;
  transform: translateY(-2px);
  .pedestal {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg);
  }
  .top {
    position: absolute;
    width: 100px;
    height: 140px;
    transform-origin: top;
    transform: rotateX(-90deg);
    p {
      margin: 0;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      box-shadow: inset 0 10px 4px -6px rgba(11, 216, 232, 0.8);
      background: linear-gradient(
        to top,
        #161a1f 20%,
        rgba(11, 216, 232, 0.1) 70%,
        rgba(11, 216, 232, 0.2) 100%
      );
    }
  }
  .front {
    width: 100px;
    height: 30px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0) 40%,
      rgba(11, 216, 232, 0.1) 70%,
      rgba(11, 216, 232, 0.4) 100%
    );
  }
}
</style>
